<template>
  <view class="page-content">
    <view class="header-box">
      <projectHead id="ProjectHead" :projectInfo="objData"></projectHead>
    </view>

    <view
      :class="[
        'content-item',
        { noButton: !hasPermission(['CTMS-PROJECTCENTER-SY-CY-ADD']) },
      ]"
      :style="`margin-top:${px2rpx(height)}rpx`"
    >
      <member-item
        v-for="item in userList"
        :key="item.userId"
        :info="item"
        :created-user-id="createdUserId"
        :projectId="objData.projectId"
        @reload="resetTable"
        @changeUser="changeUser"
      ></member-item>
      <u-loadmore :status="status" :load-text="loadText" />
    </view>

    <u-button
      class="btn-box"
      type="primary"
      @click="addMember"
      v-if="hasPermission(['CTMS-PROJECTCENTER-SY-CY-ADD'])"
      >添加</u-button
    >
  </view>
</template>
<script lang="ts" setup>
import memberItem from './components/memberItem.vue';
import projectHead from '../components/projectHead.vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import {
  getOrgProjectUserList,
  getProjectDetails,
} from '@/api/modules/project';
import { px2rpx, getAppInfo } from '@/utils/tools';
import { useUserStoreWidthOut } from '@/stores/user';
import { useDomHeight } from '@/hooks/useDomHeight';
import { useBack } from '@/hooks/useBack';
import { usePermission } from '@/hooks/usePermission';
const { hasPermission } = usePermission();

const { height } = useDomHeight('.header-box');

const status = ref('loadmore');
const createdUserId = ref('');
const loadText = {
  loadmore: '加载更多',
  loading: '努力加载中',
  nomore: '没有更多了',
};

const scroll = () => {};
const scrolltoupper = () => {
  queryData.pageNum += 1;
  getUserList();
  console.log('触底了');
};
onReachBottom(() => {
  console.log('-------------onReachBottom');

  scrolltoupper();
});

const userList = ref<any[]>([]);
const listTotla = ref(0);
const getUserList = () => {
  getOrgProjectUserList(queryData).then((res: any) => {
    userList.value = userList.value.concat(res.list);
    listTotla.value = res.total;
    if (userList.value.length === listTotla.value) {
      status.value = 'nomore';
    } else {
      status.value = 'loadmore';
    }
  });
};
const getOwnerUser = () => {
  getProjectDetails({
    projectId: queryData.projectId,
  }).then((res: any) => {
    createdUserId.value = res.createUserId;
  });
};

const useUser = useUserStoreWidthOut();
const asyncUser = useUser.getOrgInfo;
const objData = ref<any>({});
const queryData = reactive<any>({
  pageNum: 1,
  pageSize: 10,
  orgId: asyncUser.orgId,
  appId: getAppInfo(asyncUser.appList)?.appId,
  projectId: undefined,
});
const addMember = () => {
  (uni as any).$Router.push({
    name: 'addMember',
    params: {
      projectId: queryData.projectId,
      formType: 'add',
    },
  });
};
const changeUser = (item: any) => {
  (uni as any).$Router.push({
    name: 'addMember',
    params: {
      projectId: queryData.projectId,
      userInfo: item,
      formType: 'edit',
    },
  });
};
onLoad(() => {
  const { params } = (uni as any).$Router.getQuery();
  objData.value = JSON.parse(decodeURIComponent(params));
  queryData.projectId = objData.value.projectId;
  getUserList();
  getOwnerUser();
});
const resetTable = () => {
  queryData.pageNum = 1;
  userList.value = [];
  getUserList();
};
useBack(() => {
  resetTable();
});
</script>
<style lang="scss">
.page-content {
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
.header-box {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f0f1f2;
  z-index: 10;
  padding: 30rpx;
}
.content-item {
  margin-top: 60rpx;
  padding: 0 30rpx;
  padding-bottom: 140rpx;
  &.noButton {
    padding-bottom: 20rpx;
  }
}
.btn-box {
  bottom: 0;
  width: 100%;
  background-color: #fff;
  padding: 20rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  position: fixed;
  z-index: 10;
  box-sizing: border-box;
}
</style>
